<template>
	<view>
		<view class="user-vip">
			<view class="header">
				<view class="user-vip-info row">
					<custom-image width="110rpx" height="110rpx" round :src="userInfo.avatar"></custom-image>
					<view class="ml20 column" style="gap: 10rpx;align-items: flex-start;">
						<view class="user-text white xxl row">{{userInfo.nickname}}</view>
						<view class="user-level white xs row-center">当前等级：{{userInfo.level_name || "无"}}</view>
						<view class="white xs" v-if="userInfo.start_time&&userInfo.end_time">
							有效日期：{{stampToDate(userInfo.start_time,'day') || ""}} -
							{{stampToDate(userInfo.end_time,'day') || ""}}
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="vip-swiper-container">
					<swiper class="swiper" style="height: 320rpx" previous-margin="60rpx" next-margin="60rpx"
						display-multiple-items="1" :current="currentIndex" @change="bindchange">
						<swiper-item class="swiper-item" v-for="(item, index) in levelList" :key="index">
							<view class="vip-card-item"
								:style="'background-image: url(' + item.background_image + ');'">
								<view class="top-bar row-between">
									<view class="status">
										<view v-if="item.current_level_status == 0">当前等级</view>
										<view v-else-if="item.current_level_status == 1">未解锁</view>
										<view v-else-if="item.current_level_status == -1">已解锁</view>
									</view>
									<image class="grade-icon" :src="item.image" mode="heightFix"></image>
								</view>
								<view class="row-between vip-name white">
									<view class="">{{item.name}}</view>
									<!-- <view class="sm">{{item.next_level}}</view> -->
								</view>
								<!-- 								<view class="row-center" v-if="item.diff_growth_percent">
									<view class="vip-progress bg-white row">
										<view class="vip-progress-bar" :style="'width: ' + (item.diff_growth_percent*100) + '%'"></view>
									</view>
								</view> -->

								<!-- 差值 -->
								<view class="num-box">
									<text>{{item.money}}</text>
								</view>

								<view class="footer-box">
									<!-- 进度条 -->
									<view class="left">
										<view class="row-center">
											<view class="vip-progress bg-white row">
												<view class="vip-progress-bar"
													:style="'width: ' + (item.current_level_status==1?'0':'100') + '%'">
												</view>
											</view>
										</view>
										<view class="desc" v-if="item.current_level_status==1">还需<text
												class="val">充值{{item.money}}元</text>可升级
										</view>
										<!-- 				<view class="row-between mt20" style="padding: 0 30rpx">
											<navigator hover-class="none" class="row">
												<view class="sm white" style="line-height: 36rpx">
													{{item.current_level_status == 0 ? '当前高于该等级' : item.current_growth_tips}}
												</view>
											</navigator>
											<view class="white">{{item.diff_growth_tips}}</view>
										</view> -->
									</view>
									<view class="right">
										<view class="btn" @tap="onClickUpgrate">一键升级</view>
									</view>
								</view>

							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="vip-grade-rule">
					<view class="title row">
						<view class="line br60"></view>
						<view class="xl ml20 bold">会员规则</view>
						<!-- 						<view class="xl ml20 bold">成长值规则</view> -->
					</view>
					<view class="rule-content column lighter ml20" v-html="growthRule"></view>
				</view>
				<view class="vip-rights">
					<view class="title row">
						<view class="line br60"></view>
						<view class="xl ml20 bold">会员权益</view>
					</view>
					<view class="rights-list row">
						<view v-for="(item, index) in privilegeList" :key="index" class="rights-item column-center">
							<image class="mb10" :src="item.image"></image>
							<view class="sm">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<loading-view v-if="!userInfo.nickname"></loading-view>


		<u-popup v-model="showPop" mode="bottom" border-radius="14" :closeable="true" :safe-area-inset-bottom="true">
			<view class="bg-white select-vip-level-contain">
				<view class="main-container">
					<view class="title">升级会员</view>
					<scroll-view scroll-x class="item-list">
						<view class="item-wrap">
							<view class="item" :class="selected === item.name ? 'active' : ''"
								v-for="(item, index) in levelList" :key="item.name" @click="changeCard(index)">
								<view class="item-main">
									<view v-if="item.current_level_status==1" class="item-title">升至 {{item.name}}</view>
									<view v-else class="item-title">{{item.name}}
									</view>
									<price-format :color="selected === item.name ? '#504632' : '#999'" :first-size="64"
										:subscript-size="40" :price="item.money" :weight="600"></price-format>
									<!-- <view class="line-through muted md">
										<price-format :color="selected === item.name ? '#BDA779' : '#ccc'"
											:price="item.old_price"></price-format>
									</view> -->
								</view>
								<view class="item-footer">
									<view class="text">有效期至</view>
									<view class="date">{{item.end_day.split(' ')[0]}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view v-if="currCard && currCard.yhq.amount" class="mb20 row-between" style="padding: 0 20rpx;">
						<view>优惠券</view>
						<view>
							-<text style="color: red;">￥{{currCard.yhq.amount}}</text>
						</view>
					</view>
				</view>
				<view class="footer-container">
					<view class="btn" :class="selected ? '' : 'disabled'" @tap="onClickConfirmBtn">￥{{need_money}} 立即升级
					</view>
				</view>
			</view>
		</u-popup>
		<loading-view id="van-toast" v-if="showLoading" backgroundColor="rgba(0, 0, 0, 0)"></loading-view>
	</view>
</template>

<script>
	import {
		postVipRecharge,
		getUser,
		getLevelList
	} from '@/api/user';
	import {
		prepay,
		getAlipayPayStatus
	} from '@/api/app';
	import {
		wxpay,
		alipay
	} from '@/utils/pay';
	import {
		stampToDate
	} from '../../../utils/tools';

	export default {
		data() {
			return {
				userInfo: {},
				currentIndex: 0,
				levelList: [],
				growthRule: "",
				privilegeList: [],


				showPop: false,
				selected: '1',
				need_money: 0,
				currCard: null,

				showLoading: false,
			};
		},

		components: {},
		props: {},

		onLoad: function(options) {
			this.getLevelListFun();
		},


		methods: {
			stampToDate,
			onClickUpgrate() {
				this.showPop = true
			},
			bindchange(e) {
				let {
					current
				} = e.detail;
				let currentLevel = this.levelList[current];
				this.currentIndex = current
				this.privilegeList = currentLevel.level_privilege
				this.growthRule = currentLevel.growth_rule
			},
			changeCard(index) {
				const item = this.levelList[index];
				if (item.current_level_status != 1) return;
				this.selected = item.name;
				this.need_money = item.diff_growth_percent;
				this.currCard = item;
			},
			getLevelListFun() {
				getLevelList().then(res => {
					const {
						code,
						data
					} = res;
					if (code != 1) return;
					const {
						user,
						level_list
					} = data;
					let index = level_list.findIndex(item => item.current_level_status == 0);
					if (index == -1) index = 0;
					this.userInfo = user
					this.growthRule = level_list[index].growth_rule
					this.levelList = level_list
					this.currentIndex = index
					this.currCard = level_list.find(v => v.current_level_status == 1)
					this.selected = this.currCard ? this.currCard.name : ''
					this.privilegeList = level_list[index].level_privilege
					this.need_money = level_list[index].money
				});
			},
			onClickConfirmBtn() {
				if (!this.currCard) return;
				let params = {
					money: this.currCard.money,
					level_id: this.currCard.id,
					level_day: this.currCard.end_day,
					coupon_id: this.currCard.yhq.id,
					coupon_money: this.currCard.yhq.amount,
					out_money: this.currCard.out_money
				}
				this.rechargeFun(params)
			},
			rechargeFun(obj) {
				this.showLoading = true;
				let _this = this;
				let payWay = '';

				// #ifdef MP-WEIXIN
				payWay = 1;
				// #endif

				// #ifdef MP-ALIPAY
				payWay = 2;
				// #endif

				obj = Object.assign(obj, {
					pay_way: payWay
				});
				postVipRecharge(obj).then(res => {
					if (res.code == 1) {
						let {
							id
						} = res.data;
						this.rechargeInfo = res.data;
						return prepay({
							from: 'upgrade',
							order_id: id,
							// #ifdef MP-WEIXIN
							order_source: 1,
							// #endif
						})
					} else {
						this.showLoading = false;
						return false;
					}
				}).then(res => {
					this.showLoading = false;
					if (res.code == 1) {
						let args = res.data;
						wxpay(args).then((resPay) => {
							if (resPay == 'success') {
								uni.showToast({
									title: '充值成功',
									icon: 'success',
									success() {
										_this.userInfo = null;
										_this.getLevelListFun();
										_this.showPop = false;
									}
								});
							}
						})
					} else if (res.code == 20001) {
						// #ifdef H5
						alipay(args);
						// #endif

						// #ifdef MP-ALIPAY
						const tradeNo = res.data?.data?.trade_no;
						my.tradePay({
							tradeNO: tradeNo,
							success: (res) => {
								getAlipayPayStatus({
									trade_no: tradeNo
								}).then(res => {
									if (res.tradeStatus == 'TRADE_SUCCESS') {
										uni.showToast({
											title: '支付成功',
											icon: 'success'
										});
									} else {
										uni.showToast({
											title: '支付失败',
											icon: 'none'
										});
									}
								});
							},
							fail: (res) => {
								console.log(res);
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								});
							}
						});
						// #endif
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	@import "index.scss";
</style>